<template>
  <div>
    <van-nav-bar
      fixed
      placeholder
      safe-area-inset-top
      title="上传房源信息"
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="16px" color="#333" />
      </template>
    </van-nav-bar>
    <div class="info">
      产权信息
      <span>(房地产权属证书/购房合同或其他证明材料)</span>
    </div>
    <div v-for="(item, index) in fileList" :key="index" class="picup">
      <img :src="item.url" alt="" width="80px" height="80px" />
    </div>
    <div class="cut" />
    <div class="info">
      身份证
      <span>(身份证信息需和产权所有人信息一致)</span>
    </div>
    <div class="passreal">实名认证已通过</div>
    <div class="cut" />
    <div class="houseinfo">
      <div class="headinfo">房屋信息</div>
      <div class="detailinfo de2">
        <div>
          <span>*</span>
          <span>小区名字</span>
        </div>
        <div>{{housemsg.subdistrict}}</div>
      </div>
      <div class="detailinfo de2">
        <div>
          <span>*</span>
          <span>地区选择</span>
        </div>
        <div>{{valuearea}}</div>
      </div>
      <div class="detailinfo de2">
        <div>
          <span>*</span>
          <span>房屋户型</span>
        </div>
        <div>{{value1}}</div>
      </div>
      <div class="detailinfo de2">
        <div>
          <span>*</span>
          <span>房屋楼层</span>
        </div>
        <div>{{value2}}</div>
      </div>
      <div class="detailinfo de2">
        <div>
          <span>*</span>
          <span>有无电梯</span>
        </div>
        <div>{{value3}}</div>
      </div>
      <!-- <div class="detailinfo">
        <span>*</span>
        <div class="tword">出租方式</div>
        <van-cell is-link>{{ value4 }}</van-cell>
      </div> -->
      <div :style="showmoney()" class="detailinfo de2">
        <div>
          <span>*</span>
          <span>付款方式</span>
        </div>
        <div>{{value5}}</div>
      </div>
      <div :style="showmoney()" class="detailinfo de2">
        <div>
          <span>*</span>
          <span>租金</span>
        </div>
        <div>{{housemsg.price}}元</div>
      </div>
      <div class="detailinfo other de2">
       <div>
        <span>*</span>
        <span>房屋面积</span>
       </div>
       <div>{{housemsg.houseAcre}}㎡</div>
      </div>
    </div>
    <div class="cut" />
    <div class="info"><span class="haveto">*</span>房屋照片</div>
    <div class="wword">
      <div>1.请上传清晰的房屋照片</div>
      <div>2.细节图可随意上传，限15张</div>
    </div>
    <div class="picup">
      <div class="picup">
        <img
          :src="item.url"
          alt=""
          width="80px"
          height="80px"
          v-for="(item, index) in fileList3"
          :key="index"
        />
      </div>
    </div>
    <div class="cut" />
    <div class="info">房屋视频（选填）</div>
    <div class="wword">
      <div>请拍摄房间细节视频</div>
    </div>
    <div class="picup">
      <van-uploader
        v-model="videolist1"
        :max-count="1"
        :after-read="afterReadvideo1"
        accept="video/*"
        disabled
      >
        <van-button icon="plus" type="primary" />
      </van-uploader>
    </div>
    <div class="cut" />
    <div class="info">周边环境图片（选填）</div>
    <div class="wword">
      <div>请拍摄周边环境图片</div>
    </div>
    <div class="picup">
      <div class="picup">
        <img
          :src="item.url"
          alt=""
          width="80px"
          height="80px"
          v-for="(item, index) in fileList4"
          :key="index"
        />
      </div>
    </div>
    <div class="cut" />
    <div class="info">周边环境视频（选填）</div>
    <div class="wword">
      <div>请拍摄周边环境视频</div>
    </div>
    <div class="picup">
      <van-uploader
        v-model="videolist2"
        :max-count="1"
        :after-read="afterReadvideo2"
        accept="video/*"
        disabled
      >
        <van-button icon="plus" type="primary" />
      </van-uploader>
    </div>
    <div v-show="value4 == '整租' || value4 == '合租'" class="cut" />
    <div v-show="value4 == '整租' || value4 == '合租'" class="info">
      设备设施
      <span>(丰富配置，可适当提高租赁价格)</span>
    </div>
    <div v-show="value4 == '整租'" class="tipcard">
      <span v-for="item in faclist1" ref="fac1" :key="item">{{ item }}</span>
      <span ref="clearfac1">无设备</span>
    </div>
    <div v-show="value4 == '合租'" class="tipcard">
      <span v-for="item in faclist2" ref="fac2" :key="item">{{ item }}</span>
      <span ref="clearfac2">无设备</span>
    </div>
    <div class="cut" />
    <div class="info">
      房东推荐
      <span>(详细介绍可更快出租)</span>
    </div>
    <div class="tipcard">
      <span v-for="item in recommendlist" ref="rec" :key="item">{{
        item
      }}</span>
    </div>
    <div class="cut" />
    <div class="info">
      个人偏好
      <span>(系统自动匹配适合的租客)</span>
    </div>
    <div class="tipcard">
      <span v-for="item in hablist" ref="hab" :key="item">{{ item }}</span>
      <span ref="clearhab">无要求</span>
    </div>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import { getUserInfo } from "../../apis/user.js";
import { getToken, getVideoToken } from "../../apis/house";
import local from "../../utils/local.js";
import { dataURLtoFile, uuid } from "../../utils/help.js";
import { idcardUp } from "../../apis/user.js";
import { changeUtils } from "../../utils/change.js";
import { getEdithousedetail, housechange } from "../../apis/house.js";
import { getUserId } from "@/utils/auth";
const qiniu = require("qiniu-js");
export default {
  data() {
    return {
      areaList,
      fileList: [],
      fileList2: [],
      showarea: false,
      show1: false,
      show2: false,
      show3: false,
      show4: false,
      show5: false,
      valuearea: "请选择",
      value1: "请选择",
      value2: "请选择",
      value3: "请选择",
      value4: "请选择",
      value5: "请选择",
      columns1: ["1居室", "2居室", "3居室", "4居室", "5居室及以上"],
      columns2: ["低层1-7层", "中层8-16层", "高层17层及以上"],
      columns3: ["有电梯", "无电梯"],
      columns4: ["合租", "整租"],
      columns5: ["月付", "季付", "半年付", "年付"],
      housemsg: { subdistrict: "", price: "", houseAcre: "" },
      token: "",
      videotoken: "",
      flag: true,
      pass: true,
      idcardUrl: "",

      fileList3: [],
      fileList4: [],
      videolist1: [],
      videolist2: [],
      upImg: [],
      faclist1: [
        "电视",
        "洗衣机",
        "空调",
        "冰箱",
        "沙发",
        "热水器",
        "燃气灶",
        "茶几",
        "床",
        "衣柜",
        "书桌",
        "独卫",
        "带阳台",
      ],
      faclist2: ["电视", "洗衣机", "空调", "冰箱", "沙发", "热水器", "燃气灶"],
      recommendlist: [
        "精装修",
        "近商场",
        "近地铁",
        "近公交",
        "通风好",
        "采光好",
        "隔音好",
        "南北通透",
        "有车位",
        "独立阳台",
        "电梯房",
        "独卫",
        "智能锁",
        "配套齐全",
        "首次出租",
        "随时看房",
        "押一付一",
        "拎包入住",
      ],
      hablist: [
        "单身",
        "情侣",
        "夫妻",
        "男女均可",
        "年轻人",
        "干净整洁",
        "作息正常",
        "不吸烟",
        "不养宠物",
        "工作稳定",
        "企业白领",
        "养宠物",
      ],
      choosefaclist: [],
      chooserecommendlist: [],
      choosehablist: [],
      surroundImg: [],
    };
  },
  created() {
    this.housemsg.houseId = this.$route.query.houseId;
    this.gethouseinfo();
    this.getInfo();
    this.getqntoken();
    this.getqnVideotoken();
    console.log("图片", this.fileList);
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    getInfo() {
      const userId = getUserId();
      getUserInfo({ userId: userId }).then((res) => {
        local.set("userInfo", JSON.stringify(res.result));
        if (res.result.realNameAuthStatus === 1) {
          this.pass = false;
          this.flag = true;
        }
      });
    },
    async getqntoken() {
      await getToken().then((res) => {
        local.set("qntoken", res.result.token);
        this.token = local.get("qntoken");
      });
    },
    async getqnVideotoken() {
      await getVideoToken().then((res) => {
        this.videotoken = local.get("qntoken");
        local.set("qnVideotoken", res.result.token);
      });
    },
    async gethouseinfo() {
      await getEdithousedetail({
        houseId: this.housemsg.houseId,
      }).then((response) => {
        console.log(response.result);
        this.housemsg.subdistrict = response.result.subdistrict;
        this.housemsg.houseAcre = response.result.houseAcre;
        this.housemsg.regionChoose = response.result.regionChoose;
        this.valuearea = response.result.regionChoose;
        this.housemsg.houseType = response.result.houseType;
        this.housemsg.floor = response.result.floor;
        this.housemsg.hasElevator = response.result.hasElevator;
        this.housemsg.rentalWay = response.result.rentalWay;
        this.housemsg.houseProperty = response.result.houseProperty;
        this.upImg = response.result.house_images;
        this.surroundImg = response.result.surroundingsImages;
        this.housemsg.indoorVideo = response.result.indoorVideo;
        this.housemsg.surroundingsVideo = response.result.surroundingsVideo;
        this.choosefaclist = response.result.houseService;
        this.chooserecommendlist = response.result.recommend;
        this.choosehablist = response.result.preference;
        if (this.housemsg.houseProperty) {
          const obj = { url: "", isImage: true };
          obj.url = this.$imgUrl + this.housemsg.houseProperty;
          this.fileList.push(obj);
        }
        if (this.upImg.length > 0) {
          this.upImg.forEach((e) => {
            const obj = { url: "", isImage: true };
            obj.url = this.$imgUrl + e;
            this.fileList3.push(obj);
          });
        }
        if (this.surroundImg.length > 0) {
          this.surroundImg.forEach((e) => {
            const obj = { url: "", isImage: true };
            obj.url = this.$imgUrl + e;
            this.fileList4.push(obj);
          });
        }
        if (this.housemsg.indoorVideo) {
          const innerVideo = { url: "" };
          innerVideo.url = this.$videoUrl + this.housemsg.innerVideo;
          this.videolist1.push(innerVideo);
        }
        if (this.housemsg.surroundingsVideo) {
          const surroundVideo = { url: "" };
          surroundVideo.url = this.$videoUrl + this.housemsg.surroundingsVideo;
          this.videolist2.push(surroundVideo);
        }
        if (this.housemsg.houseType == 1) {
          this.value1 = "1居室";
        } else if (this.housemsg.houseType == 2) {
          this.value1 = "2居室";
        } else if (this.housemsg.houseType == 3) {
          this.value1 = "3居室";
        } else if (this.housemsg.houseType == 4) {
          this.value1 = "4居室";
        } else if (this.housemsg.houseType == 5) {
          this.value1 = "5居室及以上";
        }
        if (this.housemsg.floor == 1) {
          this.value2 = "低层/1-7层";
        } else if (this.housemsg.floor == 2) {
          this.value2 = "中层/8-16层";
        } else if (this.housemsg.floor == 3) {
          this.value2 = "高层/17层及以上";
        }
        if (this.housemsg.hasElevator == 1) {
          this.value3 = "有电梯";
        } else if (this.housemsg.hasElevator == 2) {
          this.value3 = "无电梯";
        }
        if (this.housemsg.rentalWay == 1) {
          this.value4 = "合租";
          if (this.choosefaclist.length > 0) {
            this.$nextTick(() => {
              this.$refs.fac2.forEach((e) => {
                this.choosefaclist.forEach((item) => {
                  if (e.innerText == item) {
                    e.classList.add("active");
                  }
                });
              });
            });
          }
        } else if (this.housemsg.rentalWay == 2) {
          this.value4 = "整租";
          if (this.choosefaclist.length > 0) {
            this.$nextTick(() => {
              this.$refs.fac1.forEach((e) => {
                this.choosefaclist.forEach((item) => {
                  if (e.innerText == item) {
                    e.classList.add("active");
                  }
                });
              });
            });
          }
          this.housemsg.price = response.result.leasePrice;
          this.housemsg.housePaymentMethod = response.result.housePaymentMethod;
          if (this.housemsg.housePaymentMethod == 1) {
            this.value5 = "月付";
          } else if (this.housemsg.housePaymentMethod == 2) {
            this.value5 = "季付";
          } else if (this.housemsg.housePaymentMethod == 3) {
            this.value5 = "半年付";
          } else if (this.housemsg.housePaymentMethod == 4) {
            this.value5 = "年付";
          }
        }

        if (this.chooserecommendlist.length > 0) {
          this.$nextTick(() => {
            this.$refs.rec.forEach((e) => {
              this.chooserecommendlist.forEach((item) => {
                if (e.innerText == item) {
                  e.classList.add("active");
                }
              });
            });
          });
        }
        if (this.choosehablist.length > 0) {
          this.$nextTick(() => {
            this.$refs.hab.forEach((e) => {
              this.choosehablist.forEach((item) => {
                if (e.innerText == item) {
                  e.classList.add("active");
                }
              });
            });
          });
        }
      });
    },
    showmoney() {
      if (this.value4 == "请选择" || this.value4 == "合租") {
        return "display:none";
      } else if (this.value4 == "整租") {
        return "display:";
      }
    },
    afterReadvideo1(file) {
      const _this = this;
      const fileurl = file.content;
      const name = file.file.name;
      const imgfile = dataURLtoFile(fileurl, name);
      const config = {
        useCdnDomain: true,
        region: qiniu.region.z2,
        forceDirect: true,
      };
      const putExtra = {
        fname: name,
      };
      const observer = {
        complete(res) {
          _this.housemsg.indoorVideo = res.key;
        },
      };
      const observable = qiniu.upload(
        imgfile,
        "video/" + uuid(),
        this.videotoken,
        putExtra,
        config
      );
      observable.subscribe(observer);
    },
    afterReadvideo2(file) {
      const _this = this;
      const fileurl = file.content;
      const name = file.file.name;
      const imgfile = dataURLtoFile(fileurl, name);
      const config = {
        useCdnDomain: true,
        region: qiniu.region.z2,
        forceDirect: true,
      };
      const putExtra = {
        fname: name,
      };
      const observer = {
        complete(res) {
          _this.housemsg.surroundingsVideo = res.key;
        },
      };
      const observable = qiniu.upload(
        imgfile,
        "video/" + uuid(),
        this.videotoken,
        putExtra,
        config
      );
      observable.subscribe(observer);
    },
  },
};
</script>

<style lang="less" scoped>
.de2{
  &>div:nth-child(1){
    span:nth-child(1){
      color: #d43b33;
      margin-right: 10px;
    }
  }
}
.info {
  margin: 10px 15px 20px;
  font-size: 17px;
  font-weight: bold;
  color: #333;
  span {
    font-size: 13px;
    color: #ccc;
    font-weight: normal;
  }
}
.passreal {
  font-size: 13px;
  color: #45b7cb;
  margin: 0 15px 20px;
}
.picup {
  margin: 0 15px;
  img {
    margin-right: 10px;
  }
  .idcardup {
    width: 80px;
  }
}
.idcard {
  margin: 0 15px;
  .pass {
    color: #45b7cb;
  }
  .unpass {
    color: #d43b33;
    button {
      margin-left: 10px;
      background-color: #45b7cb;
      border: 1px solid #45b7cb;
      font-size: 14px;
      color: #fff;
    }
  }
}
.houseinfo {
  margin: 0 15px;
  .headinfo {
    margin: 10px 0 15px;
    font-size: 17px;
    font-weight: bold;
  }
  .other {
    border-bottom: none !important;
    /deep/.van-field {
      padding-left: 5px !important;
    }
    .van-cell {
      &::after {
        border: none;
      }
    }
  }
  .detailinfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 23px;
    margin-top: 23px;
    > span {
      margin-right: 5px;
      display: block;
      color: #d43b33;
    }
    .tword {
      text-align: center;
      height: 24px;
      width: 120px;
    }
    .dw {
      margin: 0px;
      display: inline-block;
      color: #999;
      font-size: 12px;
      .up {
        font-size: 9px;
        vertical-align: super;
        transform: scale(calc(9 / 12));
      }
    }
    /deep/.van-cell {
      padding: 0px;
      margin-left: 20px;
      font-size: 16px;
      .van-cell__value {
        color: #999;
      }
    }
    /deep/.van-field {
      .van-field__control {
        color: #999;
      }
      input {
        &::placeholder {
          color: #999;
        }
      }
    }
  }
}

.cut {
  height: 10px;
  width: 100%;
  background-color: #f1f1f1;
  margin-bottom: 10px;
}
.wword {
  margin: 0 15px;
  font-size: 14px;
  color: #d3d3d3;
  div {
    margin-bottom: 5px;
  }
}
.picup {
  margin: 0 11px;
  margin-top: 10px;
  margin-bottom: 10px;
  .van-button {
    width: 80px;
    height: 80px;
    background-color: #f7f8fa;
    border: none;
    color: #dcdee0;
    .van-icon {
      font-size: 40px;
    }
  }
}
.tipcard {
  margin: 0 15px;
  display: flex;
  flex-wrap: wrap;
  span {
    display: inline-block;
    width: 22%;
    height: 30px;
    background-color: #f2f2f2;
    text-align: center;
    line-height: 30px;
    border-radius: 20px;
    margin-right: 10px;
    margin-bottom: 15px;
    font-size: 13px;
    color: #666;
    &:nth-child(4n) {
      margin-right: 0px;
    }
  }
  .active {
    background-color: #45b7cb;
    color: #fff;
  }
}
/deep/.van-picker {
  .van-picker__cancel,
  .van-picker__confirm {
    color: #5ec1d2;
  }
}
.active {
  font-size: 35px;
  color: #45b7cb;
}

.btn {
  width: 100%;
  padding-bottom: 40px;
  display: flex;
  justify-content: center;
  .van-button {
    width: 90%;
    color: #fff;
    background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
  }
}
</style>
